<template>
  <div class="collaborationLedger collaboration-ledger-container">
    <div class="collaboration-ledger-inner" v-show="!isDetails && !isShowCompanyDetails">
      <PageTitle :goBack="false" title="供应商列表" :border="true" class="myFixed" />
      <div class="myCardCss" style="padding-top: 70px">
        <div class="searchDiv">
          <a-input
            style="width: 240px; margin-right: 8px; margin-left: 0px !important; border-radius: 4px"
            placeholder="请输入供应商名称查询"
            @keyup.enter="searchData"
            v-model:value="formData.companyName"
            allow-clear
            @blur="blur"
          >
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>
          <a-button
            type="primary"
            danger
            style="margin-right: 8px; border-radius: 4px; border: unset"
            @click="searchData"
            >查询</a-button
          >
          <div class="exportBtn all-4-border" @click="openModel(null)"
            >批量评分<label v-if="selectLists.length && !isOne">({{ selectLists.length }})</label>
          </div>
        </div>
        <a-spin :spinning="pageLoading">
          <a-table
            class="detail-a-table__main"
            :dataSource="dataSource"
            :columns="columns"
            :pagination="false"
            :row-selection="{
              selectedRowKeys: selectListsKey,
              onChange: rowSelectionChange,
              getCheckboxProps: (record) => ({ disabled: !record.companyId }),
            }"
            :scroll="{ y: 540 }"
          >
            <template #lastScore="{ record }">
              <span>{{ record.lastScore ?? '-' }}</span>
            </template>
            <template #lastCooperationDate="{ record }">
              <span>{{ record.lastCooperationDate ?? '-' }}</span>
            </template>
            <template #index="{ record, index }">
              {{ index + 1 + (pageForm.limit - 1) * pageForm.size }}
            </template>
            <template #companyName="{ record }">
              <div style="display: flex">
                <label
                  style="cursor: pointer"
                  :style="{ color: record.companyId ? '#1473dc' : '' }"
                  @click="openCompanyDetails(record.companyId)"
                  v-html="getCompanyName(record.companyName)"
                >
                </label>
                <div
                  v-if="record.markType"
                  class="tags"
                  :class="[
                    record.markType == 'WHITE'
                      ? 'tags-white'
                      : record.markType == 'BLACK'
                      ? 'tags-black'
                      : 'tags-focus',
                  ]"
                >
                  {{
                    record.markType == 'WHITE'
                      ? '白名单'
                      : record.markType == 'BLACK'
                      ? '黑名单'
                      : '重点关注名单'
                  }}
                </div>
              </div>
            </template>
            <!-- <template #markType="{ record }">
              {{
                record.markType == 'WHITE'
                  ? '白名单'
                  : record.markType == 'BLACK'
                  ? '黑名单'
                  : '重点关注名单'
              }}
            </template> -->
            <template #totalCooperationCount="{ record }">
              <a
                style="color: #1473dc"
                @click="openDetails(record.companyId, record.companyName)"
                >{{ record.totalCooperationCount }}</a
              >
            </template>
            <template #operation="{ record }">
              <a v-if="record.companyId" style="color: #1473dc" @click="openModel(record)">评分</a>
            </template>
          </a-table>
        </a-spin>
        <div class="pagination-container">
          <!-- 共有多少条 -->
          <div class="total-container"
            >共 <span>{{ pageForm.total }}</span> 条</div
          >
          <a-pagination
            size="small"
            :total="pageForm.total"
            :pageSize="pageForm.size"
            :current="pageForm.limit"
            :hideOnSinglePage="true"
            :showSizeChanger="false"
            @change="changePage"
            :scrollToFirstRowOnChange="true"
          />
        </div>
      </div>
    </div>
    <div class="level2" v-if="isDetails">
      <PageTitle
        :goBack="true"
        title="合作明细"
        :border="true"
        :back-type="false"
        @go-back="backList"
      />
      <div class="myCardCss" style="width: 100%">
        <div class="searchDiv">
          <a-select
            v-model:value="formData.year"
            placeholder="年份"
            style="width: 120px; margin-right: 8px"
            allow-clear
            @change="searchDetails"
          >
            <a-select-option :value="2024">2024</a-select-option>
            <a-select-option :value="2023">2023</a-select-option>
            <a-select-option :value="2022">2022</a-select-option>
            <a-select-option :value="2021">2021</a-select-option>
            <a-select-option :value="2020">2020</a-select-option>
            <a-select-option :value="2019">2019</a-select-option>
            <a-select-option :value="2018">2018</a-select-option>
            <a-select-option :value="2017">2017</a-select-option>
            <a-select-option :value="2016">2016</a-select-option>
            <a-select-option :value="2015">2015</a-select-option>
            <a-select-option :value="2014">2014</a-select-option>
            <a-select-option :value="2013">2013</a-select-option>
            <a-select-option :value="2012">2012</a-select-option>
            <a-select-option :value="2011">2011</a-select-option>
            <a-select-option :value="2010">2010</a-select-option>
            <a-select-option :value="2009">2009</a-select-option>
            <a-select-option :value="2008">2008</a-select-option>
            <a-select-option :value="2007">2007</a-select-option>
            <a-select-option :value="2006">2006</a-select-option>
            <a-select-option :value="2005">2005</a-select-option>
            <a-select-option :value="2004">2004</a-select-option>
            <a-select-option :value="2003">2003</a-select-option>
            <a-select-option :value="2002">2002</a-select-option>
            <a-select-option :value="2001">2001</a-select-option>
            <a-select-option :value="2000">2000</a-select-option>
          </a-select>
          <a-select
            v-model:value="formData.targetCategory"
            placeholder="标的物类别"
            style="width: 120px; margin-right: 8px"
            allow-clear
            @change="searchDetails"
          >
            <a-select-option value="物资类">物资类</a-select-option>
            <a-select-option value="工程类">工程类</a-select-option>
<!--            <a-select-option value="服务">服务</a-select-option>-->
            <a-select-option value="服务类">服务类</a-select-option>
<!--            <a-select-option value="工程">工程</a-select-option>-->
<!--            <a-select-option value="科研">科研</a-select-option>-->
<!--            <a-select-option value="施工">施工</a-select-option>-->
<!--            <a-select-option value="物资">物资</a-select-option>-->
<!--            <a-select-option value="修理">修理</a-select-option>-->
<!--            <a-select-option value="移民">移民</a-select-option>-->
          </a-select>
          <a-select
            v-model:value="formData.professionalSection"
            placeholder="专业板块"
            style="width: 120px; margin-right: 8px"
            allow-clear
            @change="searchDetails"
          >
            <a-select-option value="科技研发">科技研发</a-select-option>
            <a-select-option value="生产运维">生产运维</a-select-option>
            <a-select-option value="水电">水电</a-select-option>
            <a-select-option value="信息化">信息化</a-select-option>
            <a-select-option value="科研">科研</a-select-option>
            <a-select-option value="其他">其他</a-select-option>
          </a-select>
          <a-select
            v-model:value="formData.planType"
            placeholder="计划类型"
            style="width: 120px; margin-right: 8px"
            allow-clear
            @change="searchDetails"
          >
            <a-select-option value="常规计划">常规计划</a-select-option>
            <a-select-option value="紧急采购计划">紧急采购计划</a-select-option>
            <a-select-option value="零星采购计划">零星采购计划</a-select-option>
<!--            <a-select-option value="线下补协">线下补协</a-select-option>-->
<!--            <a-select-option value="线下续签">线下续签</a-select-option>-->
            <a-select-option value="直接采购计划">直接采购计划</a-select-option>
            <a-select-option value="直接采购计划">框架采购计划</a-select-option>
<!--            <a-select-option value="直接签订">直接签订</a-select-option>-->
          </a-select>
          <a-select
            v-model:value="formData.projectPhase"
            placeholder="项目阶段"
            @change="searchDetails"
            allow-clear
            style="width: 120px; margin-right: 8px"
          >
<!--            <a-select-option value="采购已完成">采购已完成</a-select-option>-->
<!--            <a-select-option value="科技研发">科技研发</a-select-option>-->
<!--            <a-select-option value="前期">前期</a-select-option>-->
<!--            <a-select-option value="生产">生产</a-select-option>-->
<!--            <a-select-option value="生产运维">生产运维</a-select-option>-->
            <a-select-option value="项目前期">项目前期</a-select-option>
            <a-select-option value="基建">基建</a-select-option>
            <a-select-option value="生产检修技改运维">生产检修技改运维</a-select-option>
            <a-select-option value="其他">其他</a-select-option>
          </a-select>
          <a-input
            style="width: 240px; margin-right: 20px"
            placeholder="请输入关键字查询"
            @keyup.enter="searchDetails"
            allow-clear
            v-model:value="formData.keyword"
          >
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>
          <a-button type="primary" danger style="margin-right: 20px" @click="searchDetails"
            >查询</a-button
          >
        </div>
        <a-table
          :dataSource="dataSourceByDetails"
          :columns="columnsByDetails"
          :pagination="false"
          :scroll="{ x: 1000 }"
        >
          <template #index="{ index }">
            {{ index + 1 }}
          </template>
<!--          <template #companyName="{ record }">-->
<!--            <label style="color: #1473dc; cursor: pointer" @click="openCompanyDetails(record.companyId)">{{ record.companyName }}</label>-->
<!--          </template>-->
          <template #operation="{ record }">
            <a @click="openInfoBox(record)" style="color:#1473dc">详情</a>
          </template>
        </a-table>
        <a-pagination
          size="small"
          :total="pageFormByDetails.total"
          :pageSize="pageFormByDetails.size"
          :current="pageFormByDetails.limit"
          :hideOnSinglePage="true"
          @change="changePageByDetails"
          style="margin-top: 10px; float: right"
        />
      </div>
    </div>
    <a-modal
      v-model:visible="isShowModal"
      :maskClosable="false"
      :width="720"
      :centered="true"
      :okText="textOk"
      title="供应商评分"
      @cancel="closePF"
      @ok="savePF"
      :destroyOnClose="true"
    >
      <!--      <a-form :model="addForm" :label-col="{ span: 6 }" :wrapper-col="12" style="margin-top: 16px">-->
      <!--        <a-form-item label="统一社会信用代码">-->
      <!--          <a-input v-model:value="addForm.creditCode" style="width: 400px" />-->
      <!--        </a-form-item>-->
      <!--        <a-form-item label="法人代表">-->
      <!--          <a-input v-model:value="addForm.corporationName" style="width: 400px" />-->
      <!--        </a-form-item>-->
      <!--      </a-form>-->
      <div class="companyName" style="color: #303133">
        <!-- <img src="../../../assets/images/company-icon-test.png" alt="" /> -->
        <img :src="needImgUrl ? needImgUrl : defultImg" alt="" style="width: 30px; height: 30px" />
        <span v-if="selectLists[0].companyName" v-html="selectLists[0].companyName"></span>
        <label v-if="selectLists.length > 1">共{{ selectLists.length }}家供应商企业</label>
      </div>
      <div class="myTableDiv" v-show="!isShowLoading">
        <div class="tips">请从以下列表中选择需要使用的评分模型。</div>
        <a-table
          :dataSource="modalList"
          :columns="modalColumns"
          :pagination="false"
          :row-selection="rowSelectionModel"
          row-key="id"
        />
        <a-pagination
          size="small"
          :total="pageFormByModel.total"
          :pageSize="pageFormByModel.size"
          :current="pageFormByModel.limit"
          :hideOnSinglePage="true"
          @change="changePageByModel"
          style="margin-top: 10px; float: right"
        />
        <div style="clear: both"></div>
      </div>
      <div v-show="isShowLoading" class="nowPF">
        <a-spin :indicator="isShowLoading" style="margin-bottom: 8px" />
        <label style="margin-bottom: 16px">正在评分中，请稍后到供应商评分列表查看评分结果。</label>
        <a-button
          type="primary"
          danger
          @click="closeModal"
          style="width: fit-content; margin: 0 auto"
          >我知道了</a-button
        >
      </div>
    </a-modal>
    <SupplierDetails v-if="isShowCompanyDetails" :company-id="companyId" @go-back="goBack" />
    <a-modal v-model:visible="isShowInfo" title="项目采购台账详情" :footer="null" width="70%">
      <page-title title="基本信息"></page-title>
      <div class="row" style="margin-top: 20px">
        <div class="col name firstCol" title="中标人">中标人</div>
        <div class="col value firstCol" :title="infoForm.winningBidder">{{infoForm.winningBidder}}</div>
        <div class="col name firstCol" title="合同名称">合同名称</div>
        <div class="col value firstCol" :title="infoForm.planName">{{infoForm.planName}}</div>
      </div>
      <div class="row">
        <div class="col name" title="项目公司">项目公司</div>
        <div class="col value" :title="infoForm.companyName">{{infoForm.companyName}}</div>
        <div class="col name" title="年份">年份</div>
        <div class="col value" :title="infoForm.year">{{infoForm.year}}</div>
      </div>
      <div class="row">
        <div class="col name" title="专业板块">专业板块</div>
        <div class="col value" :title="infoForm.professionalSection">{{infoForm.professionalSection}}</div>
        <div class="col name" title="合同类型">合同类型</div>
        <div class="col value" :title="infoForm.planType">{{infoForm.planType}}</div>
      </div>
      <div class="row">
        <div class="col name" title="是否为供应商短名单采购">是否为供应商短名单采购</div>
        <div class="col value" :title="infoForm.onSupplierShortlist">{{infoForm.onSupplierShortlist}}</div>
        <div class="col name" title="评审方式">评审方式</div>
        <div class="col value" :title="infoForm.evaluationMethod">{{infoForm.evaluationMethod}}</div>
      </div>
      <div class="row">
        <div class="col name" title="项目阶段">项目阶段</div>
        <div class="col value" :title="infoForm.projectPhase">{{infoForm.projectPhase}}</div>
        <div class="col name" style="background: white"></div>
        <div class="col value"></div>
      </div>
      <page-title title="招标信息"></page-title>
      <div class="row" style="margin-top: 20px">
        <div class="col name firstCol" title="计划名称">计划名称</div>
        <div class="col value firstCol" :title="infoForm.planName">{{infoForm.planName}}</div>
        <div class="col name firstCol" title="采购依据（立项）">采购依据（立项）</div>
        <div class="col value firstCol" :title="infoForm.procurementBasis">{{infoForm.procurementBasis}}</div>
      </div>
      <div class="row">
        <div class="col name" title="计划类型">计划类型</div>
        <div class="col value" :title="infoForm.planType">{{infoForm.planType}}</div>
        <div class="col name" title="标包名称">标包名称</div>
        <div class="col value" :title="infoForm.packageName">{{infoForm.packageName}}</div>
      </div>
      <div class="row">
        <div class="col name" title="标的物类别">标的物类别</div>
        <div class="col value" :title="infoForm.targetCategory">{{infoForm.targetCategory}}</div>
        <div class="col name" title="概（预）算金额（万元）">概（预）算金额（万元）</div>
        <div class="col value" :title="infoForm.budgetAmount">{{infoForm.budgetAmount}}</div>
      </div>
      <div class="row">
        <div class="col name" title="采购与招标管理机构">采购与招标管理机构</div>
        <div class="col value" :title="infoForm.procurementAgencyType">{{infoForm.procurementAgencyType}}</div>
        <div class="col name" title="采购方式">采购方式</div>
        <div class="col value" :title="infoForm.procurementMethod">{{infoForm.procurementMethod}}</div>
      </div>
      <div class="row">
        <div class="col name" title="采购代理机构名称">采购代理机构名称</div>
        <div class="col value" :title="infoForm.procurementAgencyName">{{infoForm.procurementAgencyName}}</div>
        <div class="col name" title="招标（非招标）编号">招标（非招标）编号</div>
        <div class="col value" :title="infoForm.tenderNumber">{{infoForm.tenderNumber}}</div>
      </div>
      <div class="row">
        <div class="col name" title="最高限价（万元）">最高限价（万元）</div>
        <div class="col value" :title="infoForm.maximumPrice">{{infoForm.maximumPrice}}</div>
        <div class="col name" title="实际开标/询价/竞价/谈判时间">实际开标/询价/竞价/谈判时间</div>
        <div class="col value" :title="infoForm.bidOpeningDate">{{infoForm.bidOpeningDate}}</div>
      </div>
      <div class="row">
        <div class="col name" title="二次挂网时间">二次挂网时间</div>
        <div class="col value" :title="infoForm.secondPostingDate">{{infoForm.secondPostingDate}}</div>
        <div class="col name" title="实际开标/询价/竞价/谈判时间">实际开标/询价/竞价/谈判时间</div>
        <div class="col value" :title="infoForm.bidOpeningDate2">{{infoForm.bidOpeningDate2}}</div>
      </div>
      <div class="row">
        <div class="col name" title="三次挂网时间">三次挂网时间</div>
        <div class="col value" :title="infoForm.thirdPostingDate">{{infoForm.thirdPostingDate}}</div>
        <div class="col name" title="实际开标/询价/竞价/谈判时间">实际开标/询价/竞价/谈判时间</div>
        <div class="col value" :title="infoForm.bidOpeningDate3">{{infoForm.bidOpeningDate3}}</div>
      </div>
      <page-title title="中标信息"></page-title>
      <div class="row" style="margin-top: 20px">
        <div class="col name firstCol" title="首选中标人">首选中标人</div>
        <div class="col value firstCol" :title="infoForm.firstChoiceBidder">{{infoForm.firstChoiceBidder}}</div>
        <div class="col name firstCol" title="备选中标人">备选中标人</div>
        <div class="col value firstCol" :title="infoForm.secondChoiceBidder">{{infoForm.secondChoiceBidder}}</div>
      </div>
      <div class="row">
        <div class="col name" title="排序第三候选人（如果有）">排序第三候选人（如果有）</div>
        <div class="col value" :title="infoForm.thirdChoiceBidder">{{infoForm.thirdChoiceBidder}}</div>
        <div class="col name" title="定标时间">定标时间</div>
        <div class="col value" :title="infoForm.awardDate">{{infoForm.awardDate}}</div>
      </div>
      <div class="row">
        <div class="col name" title="定标会议">定标会议</div>
        <div class="col value" :title="infoForm.awardMeeting">{{infoForm.awardMeeting}}</div>
        <div class="col name" title="是否有异议或投诉">是否有异议或投诉</div>
        <div class="col value" :title="infoForm.objectionsOrComplaints">{{infoForm.objectionsOrComplaints}}</div>
      </div>
      <div class="row">
        <div class="col name" title="中标人">中标人</div>
        <div class="col value" :title="infoForm.winningBidder">{{infoForm.winningBidder}}</div>
        <div class="col name" title="中标通知书下发时间">中标通知书下发时间</div>
        <div class="col value" :title="infoForm.awardNotificationDate">{{infoForm.awardNotificationDate}}</div>
      </div>
      <div class="row">
        <div class="col name" title="中标/中选金额（万元）">中标/中选金额（万元）</div>
        <div class="col value" :title="infoForm.winningAmount">{{infoForm.winningAmount}}</div>
        <div class="col name" title="是否招标转谈判采购">是否招标转谈判采购</div>
        <div class="col value" :title="infoForm.biddingToNegotiation">{{infoForm.biddingToNegotiation}}</div>
      </div>
      <page-title title="合同信息"></page-title>
      <div class="row" style="margin-top: 20px">
        <div class="col name firstCol" title="合同编号">合同编号</div>
        <div class="col value firstCol" :title="infoForm.contractNumber">{{infoForm.contractNumber}}</div>
        <div class="col name firstCol" title="合同签订时间">合同签订时间</div>
        <div class="col value firstCol" :title="infoForm.contractSigningDate">{{infoForm.contractSigningDate}}</div>
      </div>
      <div class="row">
        <div class="col name" title="工期（服务期）起止时间">工期（服务期）起止时间</div>
        <div class="col value" :title="infoForm.projectPeriodStartDate">{{infoForm.projectPeriodStartDate}}</div>
        <div class="col name" title="合同价格（万元）">合同价格（万元）</div>
        <div class="col value" :title="infoForm.contractPrice">{{infoForm.contractPrice}}</div>
      </div>
      <div class="row">
        <div class="col name" title="其中备用金（万元）">其中备用金（万元）</div>
        <div class="col value" :title="infoForm.contingencyFund">{{infoForm.contingencyFund}}</div>
        <div class="col name" title="合同变更金额（万元）">合同变更金额（万元）</div>
        <div class="col value" :title="infoForm.contractAmendmentAmount">{{infoForm.contractAmendmentAmount}}</div>
      </div>
      <div class="row">
        <div class="col name" title="合同结算金额（万元）">合同结算金额（万元）</div>
        <div class="col value" :title="infoForm.contractSettlementAmount">{{infoForm.contractSettlementAmount}}</div>
        <div class="col name" title="合同是否履行完成">合同是否履行完成</div>
        <div class="col value" :title="infoForm.contractCompletion">{{infoForm.contractCompletion}}</div>
      </div>
      <div class="row">
        <div class="col name" title="合同会签发起时间">合同会签发起时间</div>
        <div class="col value" :title="infoForm.contractInitiationDate">{{infoForm.contractInitiationDate}}</div>
        <div class="col name" title="合同经办人员">合同经办人员</div>
        <div class="col value" :title="infoForm.contractHandler">{{infoForm.contractHandler}}</div>
      </div>
      <div class="row" style="padding-bottom: 20px">
        <div class="col name" title="单一来源理由及依据">单一来源理由及依据</div>
        <div class="col value" :title="infoForm.singleSourceReason">{{infoForm.singleSourceReason}}</div>
        <div class="col name" style="background: white"></div>
        <div class="col value"></div>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import PageTitle from '/@/components/PageTitle/index.vue';
  import SupplierDetails from '/@/components/SupplierDetails/index.vue';
  import { getCompanyLedger, getProjectLedger } from '/@/api/supplierManage';
  import { getModelList, submitRating } from '/@/api/supplierRating';
  import { getCompanyInfo } from '/@/api/monitoringCenter';
  import defultImg from '/@/assets/images/company-icon-test.png';
  let formData = ref({
    companyName: '', // 第一级列表用的参数
    year: null,
    targetCategory: null,
    professionalSection: null,
    planType: null,
    projectPhase: null,
    keyword: '',
  });
  let dataSource = ref([]);

  let isOne = ref(false);
  const closePF = async () => {
    isOne.value = false;
    await close();
    if (isOne.value) {
      selectLists.value = [];
    }
  };
  const close = () => {
    isShowModal.value = false;
  };
  const getCompanyName = (companyName) => {
    if (formData.value.companyName.trim()) {
      return companyName.replaceAll(
        formData.value.companyName.trim(),
        `<span style="color: red;">${formData.value.companyName.trim()}</span>`,
      );
    }
    return companyName;
  };

  let columns = ref([
    {
      title: '序号',
      align: 'left',
      width: '60px',
      fixed: true,
      slots: { customRender: 'index' },
    },
    {
      title: '供应商名称',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'left',
      fixed: true,
      width: '300px',
      slots: { customRender: 'companyName' },
    },
    {
      title: '最近一次合作时间',
      dataIndex: 'lastCooperationDate',
      key: 'lastCooperationDate',
      align: 'left',
      width: '150px',
      slots: { customRender: 'lastCooperationDate' },
    },
    {
      title: '共计合作次数',
      dataIndex: 'totalCooperationCount',
      key: 'totalCooperationCount',
      align: 'left',
      slots: { customRender: 'totalCooperationCount' },
      width: '130px',
    },
    {
      title: '法人代表',
      dataIndex: 'operName',
      key: 'operName',
      align: 'left',
      width: '120px',
    },
    {
      title: '成立时间',
      dataIndex: 'startTime',
      key: 'startTime',
      align: 'left',
      width: '150px',
    },
    // {
    //   title: '供应商标签',
    //   dataIndex: 'markType',
    //   slots: { customRender: 'markType' },
    //   align: 'center',
    //   width: '180px',
    // },
    {
      title: '注册资本',
      dataIndex: 'regCapital',
      key: 'regCapital',
      align: 'left',
      width: '150px',
    },
    {
      title: '注册地区',
      dataIndex: 'addressDetail',
      key: 'addressDetail',
      width: '320px',
      ellipsis: true,
      align: 'left',
    },
    // {
    //   title: '最近一次评分',
    //   dataIndex: 'lastScore',
    //   key: 'lastScore',
    //   align: 'left',
    //   width: '250px',
    //   slots: { customRender: 'lastScore' },
    // },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      slots: { customRender: 'operation' },
      align: 'left',
      width: '80px',
    },
  ]);
  let pageForm = ref({
    size: 20,
    limit: 1,
    total: 0,
  });
  function changePage(val) {
    pageForm.value.limit = val;
    // todo
    getData();
  }
  const pageLoading = ref(false);
  async function getData() {
    try {
      pageLoading.value = true;
      let queryData = {
        companyName: formData.value.companyName,
        limit: pageForm.value.limit,
        size: pageForm.value.size,
      };
      const res = await getCompanyLedger(queryData);
      dataSource.value = res.list.map((item) => {
        item.key = item.companyId;
        return item;
      });
      pageForm.value.total = res.total;
    } finally {
      pageLoading.value = false;
    }
  }
  getData();
  function searchData() {
    pageForm.value.limit = 1;
    getData();
  }
  let selectLists = ref([]);
  let selectListsKey = ref([]);
  const rowSelectionChange = (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
    selectListsKey.value = selectedRowKeys;
    selectLists.value = selectedRows;
  };
  let isShowModal = ref(false);
  let modalList = ref([]);
  let modalColumns = ref([
    {
      title: '模型名称',
      dataIndex: 'name',
      key: 'name',
      align: 'left',
    },
    {
      title: '模型应用场景',
      dataIndex: 'description',
      key: 'description',
      align: 'left',
    },
  ]);
  let needImgUrl = ref('');
  async function openModel(record: any) {
    if (record) {
      selectLists.value = [record];
      isOne.value = true;
    } else {
      isOne.value = false;
    }
    if (!selectLists.value.length) {
      return message.warning('请选择供应商');
    }
    if (selectLists.value.filter((item) => !item.companyId).length) {
      return message.warning('所选列表中包含无效公司，无法评分,请重新选择');
    }
    isShowModal.value = true;
    getListByModel();
    console.log(selectLists.value[0].companyId, 'selectLists.value');
    let needCompanyId = selectLists.value[0].companyId;
    const res = await getCompanyInfo(needCompanyId);
    console.log(res, 'res');
    needImgUrl.value = res.logoUrl;
    // companyInfo.value = res
  }
  function closeModal() {
    isShowModal.value = false;
    isShowLoading.value = false;
  }

  // 供应商评分
  let pageFormByModel = ref({
    size: 10,
    limit: 1,
    total: 0,
  });
  function changePageByModel(val) {
    pageFormByModel.value.limit = val;
    // todo
    getListByModel();
  }
  async function getListByModel() {
    let queryData = {
      status: 1,
      limit: pageFormByModel.value.limit,
      size: pageFormByModel.value.size,
    };
    const res = await getModelList(queryData);
    modalList.value = res.list;
    pageFormByModel.value.total = res.total;
  }

  let modalSelectList = [];
  let isShowLoading = ref(false);
  let textOk = ref('确定评分');
  const rowSelectionModel = {
    type: 'radio',
    onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
      modalSelectList = selectedRows;
    },
  };
  async function savePF() {
    if (isShowLoading.value) {
      isShowModal.value = false;
    }
    if (!modalSelectList.length) {
      return message.warning('请选择评分模型');
    }
    isShowLoading.value = true;
    let queryData = {
      companyIds: selectLists.value.map((item) => item.companyId),
      modelIds: modalSelectList.map((item) => item.id),
    };
    try {
      const res = await submitRating(queryData);
      isShowModal.value = false;
      selectListsKey.value = [];
      getData();
    } finally {
      isShowLoading.value = false;
      textOk.value = '完成评分';
    }
  }

  let dataSourceByDetails = ref([]);
  let columnsByDetails = ref([
    {
      title: '序号',
      align: 'center',
      width: '50px',
      fixed: true,
      slots: { customRender: 'index' },
    },
    {
      title: '供应商名称',
      dataIndex: 'winningBidder',
      key: 'winningBidder',
      align: 'center',
      fixed: true,
      width: '300px',
    },
    {
      title: '合同名称',
      dataIndex: 'planName',
      key: 'planName',
      align: 'center',
      width: '200px',
    },
    {
      title: '项目公司名称',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'center',
      width: '300px',
      slots: { customRender: 'companyName' },
    },
    {
      title: '中标/中选金额（万元）',
      dataIndex: 'winningAmount',
      key: 'winningAmount',
      align: 'center',
      width: '200px',
    },
    {
      title: '中标通知书下发时间',
      dataIndex: 'awardNotificationDate',
      key: 'awardNotificationDate',
      align: 'center',
      width: '200px',
    },
    {
      title: '年份',
      dataIndex: 'year',
      key: 'year',
      align: 'center',
      width: '200px',
    },
    // {
    //   title: '计划名称',
    //   dataIndex: 'planName',
    //   key: 'planName',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '采购依据（立项）',
    //   dataIndex: 'procurementBasis',
    //   key: 'procurementBasis',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '计划类型',
    //   dataIndex: 'planType',
    //   key: 'planType',
    //   align: 'center',
    //   width: '200px',
    // },
    {
      title: '专业板块',
      dataIndex: 'professionalSection',
      key: 'professionalSection',
      align: 'center',
      width: '200px',
    },
    {
      title: '合同类型',
      dataIndex: 'planType',
      key: 'planType',
      align: 'center',
      width: '200px',
    },
    {
      title: '是否为供应商短名单采购',
      dataIndex: 'onSupplierShortlist',
      key: 'onSupplierShortlist',
      align: 'center',
      width: '200px',
    },
    {
      title: '评审方式',
      dataIndex: 'evaluationMethod',
      key: 'evaluationMethod',
      align: 'center',
      width: '200px',
    },
    {
      title: '项目阶段',
      dataIndex: 'projectPhase',
      key: 'projectPhase',
      align: 'center',
      width: '200px',
    },
    // {
    //   title: '标包名称',
    //   dataIndex: 'packageName',
    //   key: 'packageName',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '标的物类别',
    //   dataIndex: 'targetCategory',
    //   key: 'targetCategory',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '概（预）算金额（万元）',
    //   dataIndex: 'budgetAmount',
    //   key: 'budgetAmount',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '采购与招标管理机构',
    //   dataIndex: 'procurementAgencyType',
    //   key: 'procurementAgencyType',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '采购方式',
    //   dataIndex: 'procurementMethod',
    //   key: 'procurementMethod',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '是否为供应商短名单采购',
    //   dataIndex: 'onSupplierShortlist',
    //   key: 'onSupplierShortlist',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '评审方式',
    //   dataIndex: 'evaluationMethod',
    //   key: 'evaluationMethod',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '采购代理机构名称',
    //   dataIndex: 'procurementAgencyName',
    //   key: 'procurementAgencyName',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '招标（非招标）编号',
    //   dataIndex: 'tenderNumber',
    //   key: 'tenderNumber',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '实际开标/询价/竞价/谈判时间',
    //   dataIndex: 'bidOpeningDate',
    //   key: 'bidOpeningDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '二次挂网时间',
    //   dataIndex: 'secondPostingDate',
    //   key: 'secondPostingDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '实际开标/询价/竞价/谈判时间',
    //   dataIndex: 'bidOpeningDate',
    //   key: 'bidOpeningDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '三次挂网时间',
    //   dataIndex: 'thirdPostingDate',
    //   key: 'thirdPostingDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '实际开标/询价/竞价/谈判时间',
    //   dataIndex: 'bidOpeningDate',
    //   key: 'bidOpeningDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '最高限价（万元）',
    //   dataIndex: 'maximumPrice',
    //   key: 'maximumPrice',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '首选中标人',
    //   dataIndex: 'firstChoiceBidder',
    //   key: 'firstChoiceBidder',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '备选中标人',
    //   dataIndex: 'secondChoiceBidder',
    //   key: 'secondChoiceBidder',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '排序第三候选人（如有）',
    //   dataIndex: 'thirdChoiceBidder',
    //   key: 'thirdChoiceBidder',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '定标时间',
    //   dataIndex: 'awardDate',
    //   key: 'awardDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '定标会议',
    //   dataIndex: 'awardMeeting',
    //   key: 'awardMeeting',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '是否有异议或投诉',
    //   dataIndex: 'objectionsOrComplaints',
    //   key: 'objectionsOrComplaints',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '中标通知书下发时间',
    //   dataIndex: 'awardNotificationDate',
    //   key: 'awardNotificationDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '中标/中选金额（万元）',
    //   dataIndex: 'winningAmount',
    //   key: 'winningAmount',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '中标人',
    //   dataIndex: 'winningBidder',
    //   key: 'winningBidder',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '是否招标转谈判采购',
    //   dataIndex: 'biddingToNegotiation',
    //   key: 'biddingToNegotiation',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '合同编号',
    //   dataIndex: 'contractNumber',
    //   key: 'contractNumber',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '合同签订时间',
    //   dataIndex: 'contractSigningDate',
    //   key: 'contractSigningDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '工期（服务期）起止时间',
    //   dataIndex: 'projectPeriodStartDate',
    //   key: 'projectPeriodStartDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '合同价格（万元）',
    //   dataIndex: 'contractPrice',
    //   key: 'contractPrice',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '其中备用金（万元）',
    //   dataIndex: 'contingencyFund',
    //   key: 'contingencyFund',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '合同变更金额（万元）',
    //   dataIndex: 'contractAmendmentAmount',
    //   key: 'contractAmendmentAmount',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '合同结算金额（万元）',
    //   dataIndex: 'contractSettlementAmount',
    //   key: 'contractSettlementAmount',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '合同是否履行完成',
    //   dataIndex: 'contractCompletion',
    //   key: 'contractCompletion',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '合同会签发起时间',
    //   dataIndex: 'contractInitiationDate',
    //   key: 'contractInitiationDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '合同经办人员',
    //   dataIndex: 'contractHandler',
    //   key: 'contractHandler',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '工期（服务期）起止时间',
    //   dataIndex: 'projectPeriodStartDate',
    //   key: 'projectPeriodStartDate',
    //   align: 'center',
    //   width: '200px',
    // },
    // {
    //   title: '单一来源理由及依据',
    //   dataIndex: 'projectPeriodStartDate1',
    //   key: 'projectPeriodStartDate1',
    //   align: 'center',
    //   width: '200px',
    // },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: '80px',
      slots: { customRender: 'operation' },
      align: 'center',
      fixed: 'right',
    },
  ]);
  let pageFormByDetails = ref({
    size: 10,
    limit: 1,
    total: 0,
  });
  function changePageByDetails(val) {
    pageFormByDetails.value.limit = val;
    // todo
    getDataByDetails();
  }
  // 合作详情部分
  let isDetails = ref(false); // 是否是详情页面
  let companyId = ref('');
  let companyName = ref('');
  function openDetails(id: string, name: string) {
    pageFormByDetails.value.limit = 1;
    isDetails.value = true;
    companyId.value = '';
    companyName.value = '';
    if (id) {
      companyId.value = id;
    } else {
      companyName.value = name;
    }
    getDataByDetails();
  }
  function backList() {
    isDetails.value = false;
  }
  function searchDetails() {
    pageFormByDetails.value.limit = 1;
    getDataByDetails();
  }
  async function getDataByDetails() {
    let queryData = {
      supplierId: companyId.value,
      supplierName: companyName.value,
      year: formData.value.year,
      targetCategory: formData.value.targetCategory,
      professionalSection: formData.value.professionalSection,
      planType: formData.value.planType,
      projectPhase: formData.value.projectPhase,
      keyword: formData.value.keyword,
      limit: pageFormByDetails.value.limit,
      size: pageFormByDetails.value.size,
    };
    const res = await getProjectLedger(queryData);
    dataSourceByDetails.value = res.list;
    pageFormByDetails.value.total = res.total;
  }

  // 供应商详情
  let isShowCompanyDetails = ref(false);
  function openCompanyDetails(id: string) {
    if (!id) {
      return message.warning('未查到该公司详情');
    }
    companyId.value = id;
    isShowCompanyDetails.value = true;
  }
  function goBack() {
    isShowCompanyDetails.value = false;
  }

  const blur = () => {
    console.log(formData.value.companyName, 'formData.companyName');
  };
  let isShowInfo = ref(false)
  let infoForm = ref()
  const openInfoBox = (e: any) => {
    isShowInfo.value = true
    infoForm.value = e
  }
</script>
<style lang="less" scoped>
  :deep(.detail-a-table__main) {
    .ant-table-thead {
      .ant-table-cell {
        padding-left: 16px;
        padding-right: 16px;
      }
    }
    .ant-table-tbody {
      .ant-table-cell {
        padding-left: 16px;
        padding-right: 16px;
      }
    }
  }
  .collaborationLedger {
    &.collaboration-ledger-container {
      height: 100%;
      :deep(.collaboration-ledger-inner) {
        height: 100%;
        .myCardCss {
          // height: calc(100% - 48px);
        }
      }
      :deep(.pagination-container) {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 16px;

        .ant-pagination {
          margin-left: 16px;

          .ant-pagination-item {
            border: unset !important;
            height: 32px !important;
            line-height: 32px !important;

            &.ant-pagination-item-active {
              background-color: #fff !important;

              a {
                color: #c11a20 !important;
              }
            }
          }

          .ant-pagination-next,
          .ant-pagination-prev {
            height: 32px !important;
            line-height: 32px !important;
            border: unset !important;

            .ant-pagination-item-link {
              border: unset !important;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }

        .total-container {
          color: #606266;
          font-size: 14px;

          & > span {
            color: #c11a20;
          }
        }
      }
    }

    .info-div {
      padding: 0 52px;
      position: relative;
      width: 100%;
      height: 98px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
      .info-left {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
      }
      .info-listData {
        display: flex;
        width: 100%;
        .info-item {
          width: 170px;
          height: 66px;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
          margin-right: 12px;
          display: flex;
          .info-icon {
            margin-right: 12px;
            margin-left: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          .info-info {
            height: 100%;
            padding: 8px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name {
              font-size: 14px;
              color: #606266;
            }
            .value {
              font-size: 20px;
              font-weight: 500;
              color: #303133;
            }
          }
        }
      }
      .info-right {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: rotate(180deg) translateY(50%);
      }
    }
    .searchDiv {
      margin-bottom: 16px;
      .exportBtn {
        float: right;
        border: 1px solid #1473dc;
        width: 88px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        font-size: 14px;
        font-weight: 500;
        color: #1473dc;
        cursor: pointer;
      }
    }
  }
  .companyName {
    display: flex;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #303133;
    padding: 20px;
    border-bottom: 1px solid #dcdfe6;
    img {
      margin-right: 8px;
    }
  }
  .myTableDiv {
    padding: 16px 20px;
    .tips {
      font-size: 13px;
      line-height: 22px;
      color: #606266;
      margin-bottom: 8px;
    }
  }
  .nowPF {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 80px 0;
    color: #606266;
  }

  .tags {
    // float: right;
    margin-left: 8px;
    width: fit-content;
    padding: 2px 8px;
    border: 1px solid;
  }
  .tags-white {
    color: #16af44;
    border-color: #16af44;
  }
  .tags-black {
    color: #606266;
    border-color: #606266;
  }
  .tags-focus {
    color: #c11a20;
    border-color: #c11a20;
  }
  .myFixed {
    position: fixed;
    z-index: 10;
    width: calc(100% - 258px);
    background: #ffffff;
  }
  .row{
    width:  100%;
    padding: 0 20px;
    display: flex;
    .col{
      height: 38px;
      line-height: 38px;
      padding: 0 20px;
      border-bottom: 1px solid #dcdfe6;
    }
    .col.name{
      width:  20%;
      background: rgb(220, 238, 255);
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 超出容器部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
    }
    .col.value{
      width: 30%;
      border-right: 1px solid #dcdfe6;
      white-space: nowrap; /* 确保文本不换行 */
      overflow: hidden; /* 超出容器部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
    }
    .col.firstCol{
      border-top: 1px solid #dcdfe6;
    }
  }
</style>
